// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//不能在这里暴露，应该进行守卫设置后再进行暴露操作
const router = new VueRouter({
	routes: [
		{
			name: 'guanyu',
			path: '/about',
			component: About,
			meta: { title: '关于' }
		},
		{
			name: 'zhuye',
			path: '/home',
			component: Home,
			meta: { title: '主页' },
			children: [
				{
					name: 'xinwen',
					path: 'news',
					component: News,
					meta: { isAuth: true, title: '新闻' }
				},
				{
					name: 'xiaoxi',
					path: 'message',
					component: Message,
					// meta ,路由原信息，用来放额外的数据。这样可以被访问到，里面的数据是key-value的形式
					meta: { isAuth: true, title: '消息' },
					children: [
						{
							name: 'xiangqing',
							path: 'detail',
							component: Detail,
							meta: { isAuth: true, title: '详情' },
							//props的第三种写法，值为函数
							props($route) {
								return {
									id: $route.query.id,
									title: $route.query.title,
									a: 1,
									b: 'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前都被调用
router.beforeEach((to, from, next) => {
	//to标识目的地，from表示起点，
	console.log('前置路由守卫', to, from)
	//判断是否需要鉴权
	if (to.meta.isAuth) {
		if (localStorage.getItem('school') === 'atguigu') {
			next()
		} else {
			alert('学校名不对，无权限查看！')
		}
	} else {
		next()
	}
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
//在后置路由守卫中，next参数是undefine的，证明next是不被传入的。
router.afterEach((to, from) => {
	console.log('后置路由守卫', to, from)
	document.title = to.meta.title || '学习系统'
})

//使用这种暴露方式
export default router
